<template>
  <view class="practice-page">
    <!-- 顶部栏 -->
    <view class="practice-header">
      <uv-icon name="arrow-left" size="28" color="#fff" class="practice-back" @click="goBack" />
      <text class="practice-title">面试答题</text>
      <uv-icon name="more-circle" size="28" color="#fff" class="practice-menu" />
    </view>
    <!-- 进度条和题号 -->
    <view class="practice-progress-row">
      <view class="practice-progress-bar">
        <view class="practice-progress-inner" :style="{ width: ((currentIndex+1)/total*100)+'%' }"></view>
      </view>
      <text class="practice-progress-text">{{ currentIndex+1 }}/{{ total }}</text>
    </view>
    <!-- 题卡 -->
    <view class="practice-card">
      <view v-if="isJudge" class="practice-qtype judge">判断题</view>
      <view v-else-if="isMultiple" class="practice-qtype multiple">多选题</view>
      <view v-else :class="['practice-qtype', isInput ? 'input' : '']">{{ isInput ? '问答题' : '选择题' }}</view>
      <view class="practice-question">
        {{ questions[currentIndex].question }}
        <view v-if="isInput" style="display: flex;justify-content: flex-end;" >
          <uv-icon v-if="!isRecord" size="28" name="mic" @click="recordStart"></uv-icon>
          <uv-button v-else type="primary" size="small" @click="recordStop" text="结束语音"></uv-button>
        </view>
       
      </view>
      <view v-if="isInput" class="practice-input-area">
        <textarea v-model="inputAnswer" class="practice-input" placeholder="请输入您的答案..." />
      </view>
      <view v-else-if="isJudge" class="practice-judge-area">
        <button :class="['practice-judge-btn', selected === 'true' ? 'selected' : '']" @click="selectOption('true')">正确</button>
        <button :class="['practice-judge-btn', selected === 'false' ? 'selected' : '']" @click="selectOption('false')">错误</button>
      </view>
      <view v-else-if="isMultiple" class="practice-options">
        <view v-for="opt in questions[currentIndex].options" :key="opt.value" :class="['practice-option', selectedMultiple.includes(opt.value) ? 'selected' : '']" @click="selectMultipleOption(opt.value)">
          <view class="practice-option-label">{{ opt.label }}</view>
          <view class="practice-option-text">{{ opt.text }}</view>
        </view>
      </view>
      <view v-else class="practice-options">
        <view v-for="opt in questions[currentIndex].options" :key="opt.value" :class="['practice-option', selected === opt.value ? 'selected' : '']" @click="selectOption(opt.value)">
          <view class="practice-option-label">{{ opt.label }}</view>
          <view class="practice-option-text">{{ opt.text }}</view>
        </view>
      </view>
    </view>
    <!-- 底部按钮栏 -->
    <view class="practice-btn-row">
      <button class="practice-btn plain" @click="prev">上一题</button>
      <button class="practice-btn primary" v-if="!isLast" @click="next">下一题</button>
      <button class="practice-btn primary" v-else @click="submit">提交</button>
    </view>
    <!-- 答题结果弹窗 -->
    <uv-popup ref="popup" @change="change" mode="center" >  
          <view  class="result-modal">
      <view class="result-modal-inner">
        <view class="result-score-area">
          <view class="result-score">0</view>
          <view class="result-summary">0/{{ total }} 题回答正确</view>
          <view class="result-level">需要提高</view>
        </view>
        <view class="result-title">详细分析</view>
        <view class="result-detail-list">
          <view class="result-detail-item" v-for="(q, idx) in questions" :key="idx">
            <view class="result-q">问题{{ idx+1 }}: {{ q.question }}</view>
            <view class="result-wrong"><uv-icon name="close-circle" color="#fa3534" size="20" style="margin-right: 4rpx;" />回答错误</view>
          </view>
        </view>
      </view>
    </view>
    </uv-popup>

  </view>
</template>

<script>
 import XfVoiceDictation from '@/utils/js/xf-voice-dictation.js'
export default {
 
  data() {
    return {
      currentIndex: 0,
      selected: '',
      selectedMultiple: [],
      inputAnswer: '',
      questions: [
        {
          question: '前端性能优化的常见方法有哪些？请举例说明。',
          type: 'choice',
          options: [
            { label: 'A', value: 'A', text: '资源压缩与合并、懒加载、CDN加速等' },
            { label: 'B', value: 'B', text: '只使用内联样式' },
            { label: 'C', value: 'C', text: '频繁操作DOM' },
            { label: 'D', value: 'D', text: '页面全部内容一次性渲染' }
          ]
        },
        {
          question: '请解释RESTful API的核心原则以及它们如何影响API设计。',
          type: 'input'
        },
        {
          question: '在JavaScript中，null 和 undefined 是严格相等的（使用 === 比较）。',
          type: 'judge'
        },
        {
          question: '请简述浏览器渲染页面的过程。（多选题）',
          type: 'multiple',
          options: [
            { label: 'A', value: 'A', text: '解析HTML、构建DOM树、CSSOM树、渲染树、布局、绘制' },
            { label: 'B', value: 'B', text: '只解析HTML' },
            { label: 'C', value: 'C', text: '先绘制再布局' },
            { label: 'D', value: 'D', text: '直接渲染JS代码' }
          ]
        },
        {
          question: '说说你对Flex布局的理解，常用的属性有哪些？',
          type: 'choice',
          options: [
            { label: 'A', value: 'A', text: 'flex-direction, justify-content, align-items等' },
            { label: 'B', value: 'B', text: 'float, clear, position' },
            { label: 'C', value: 'C', text: 'display: block' },
            { label: 'D', value: 'D', text: 'z-index, opacity' }
          ]
        },
        {
          question: '如何实现响应式布局？常见的技术手段有哪些？',
          type: 'choice',
          options: [
            { label: 'A', value: 'A', text: '媒体查询、弹性布局、百分比宽度等' },
            { label: 'B', value: 'B', text: '只用px单位' },
            { label: 'C', value: 'C', text: '禁止缩放' },
            { label: 'D', value: 'D', text: '全部用绝对定位' }
          ]
        },
        {
          question: '什么是跨域？前端如何解决跨域问题？',
          type: 'choice',
          options: [
            { label: 'A', value: 'A', text: '浏览器同源策略限制不同源资源的访问，可用CORS、JSONP等解决' },
            { label: 'B', value: 'B', text: '跨域是指页面样式错乱' },
            { label: 'C', value: 'C', text: '只要用iframe就不会跨域' },
            { label: 'D', value: 'D', text: '跨域无法解决' }
          ]
        },
        {
          question: '介绍一下前端模块化的发展历程及常见的模块化规范。',
          type: 'choice',
          options: [
            { label: 'A', value: 'A', text: '经历了全局函数、CommonJS、AMD、ES6 Module等阶段' },
            { label: 'B', value: 'B', text: '模块化只在后端有' },
            { label: 'C', value: 'C', text: '只有ES6 Module' },
            { label: 'D', value: 'D', text: '模块化和组件化无关' }
          ]
        },
        {
          question: '说说你对Promise的理解，以及如何实现Promise的链式调用。',
          type: 'choice',
          options: [
            { label: 'A', value: 'A', text: 'Promise用于异步操作，then方法可链式调用' },
            { label: 'B', value: 'B', text: 'Promise只能同步执行' },
            { label: 'C', value: 'C', text: 'Promise和回调函数无关' },
            { label: 'D', value: 'D', text: 'Promise不能捕获异常' }
          ]
        },
        {
          question: '请简述虚拟DOM的原理及其优缺点。',
          type: 'choice',
          options: [
            { label: 'A', value: 'A', text: '用JS对象模拟DOM结构，提升性能但有额外开销' },
            { label: 'B', value: 'B', text: '虚拟DOM就是innerHTML' },
            { label: 'C', value: 'C', text: '虚拟DOM比真实DOM慢' },
            { label: 'D', value: 'D', text: '虚拟DOM只能用于React' }
          ]
        }
      ],
      xfVoice:'',
      isRecord:false
    }
  },
  computed: {
    total() {
      return this.questions.length
    },
    isInput() {
      return this.questions[this.currentIndex].type === 'input'
    },
    isJudge() {
      return this.questions[this.currentIndex].type === 'judge'
    },
    isMultiple() {
      return this.questions[this.currentIndex].type === 'multiple'
    },
    isLast() {
      return this.currentIndex === this.total - 1
    }
  },
  watch: {
    currentIndex() {
      this.selected = ''
      this.selectedMultiple = []
      this.inputAnswer = ''
    }
  },
  mounted() { 
    this.recordCompleted()
  },
  methods: {
    goBack() {
      uni.navigateBack()
    },
    selectOption(val) {
      this.selected = val
    },
    selectMultipleOption(val) {
      const index = this.selectedMultiple.indexOf(val)
      if (index > -1) {
        this.selectedMultiple.splice(index, 1)
      } else {
        this.selectedMultiple.push(val)
      }
    },
    prev() {
      if (this.currentIndex > 0) {
        this.currentIndex--
      }
    },
    next() {
      if (this.currentIndex < this.total - 1) {
        this.currentIndex++
      }
    },
    submit() {
      this.$refs.popup.open()
    },
    recordCompleted() {
      let that = this
      this.xfVoice = new XfVoiceDictation({
        APPID: 'cedbc434',
        APIKey: '43e30ffe38052d23b1c0d197033d6db3',
        onWillStatusChange: function (oldStatus, newStatus) {
          //可以在这里进行页面中一些交互逻辑处理：注：倒计时（语音听写只有60s）,录音的动画，按钮交互等！
        },
        onTextChange: function (text) {
          console.log('检查的文字', text)
          if (text) {
            that.inputAnswer = text
          }
        }
      })
    },
    recordStart() {
      console.log('开始录音')
      // 启动语音识别
      if (this.xfVoice) {
        this.xfVoice.start()
        this.isRecord = true
      }
    },
    recordStop() {
      
      // 启动语音识别
      if (this.xfVoice) {
        this.xfVoice.start()
        this.isRecord = false
      }
    },
  }
}
</script>

<style scoped lang="scss">
.practice-page {
  min-height: 100vh;
  background: #f8f8f8;
  display: flex;
  flex-direction: column;
}
.practice-header {
  background: #3ad6b6;
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 24rpx;
  height: 90rpx;
  position: sticky;
  top: 0;
  z-index: 10;
}
.practice-title {
  font-size: 32rpx;
  font-weight: bold;
}
.practice-progress-row {
  display: flex;
  align-items: center;
  gap: 18rpx;
  padding: 18rpx 32rpx 0 32rpx;
}
.practice-progress-bar {
  flex: 1;
  height: 10rpx;
  background: #e6f7f6;
  border-radius: 8rpx;
  overflow: hidden;
}
.practice-progress-inner {
  height: 100%;
  background: #3ad6b6;
  border-radius: 8rpx;
  transition: width 0.3s;
}
.practice-progress-text {
  font-size: 22rpx;
  color: #888;
  min-width: 70rpx;
  text-align: right;
}
.practice-card {
  background: #fff;
  border-radius: 18rpx;
  box-shadow: 0 4rpx 24rpx rgba(0, 0, 0, 0.08);
  padding: 32rpx 24rpx 24rpx 24rpx;
  margin: 32rpx auto 0 auto;
  width: 92%;
  box-sizing: border-box;
}
.practice-qtype {
  color: #3ad6b6;
  background: #e6f7f6;
  border-radius: 8rpx;
  font-size: 22rpx;
  padding: 6rpx 18rpx;
  display: inline-block;
  margin-bottom: 18rpx;
}
.practice-qtype.input {
  color: #ff9900;
  background: #fff7ed;
}
.practice-qtype.judge {
  color: #3ad6b6;
  background: #e6f7f6;
}
.practice-qtype.multiple {
  color: #ff6b35;
  background: #fff2ed;
}
.practice-question {
  font-size: 28rpx;
  color: #222;
  font-weight: 500;
  margin-bottom: 24rpx;
}
.practice-options {
  display: flex;
  flex-direction: column;
  gap: 18rpx;
}
.practice-option {
  display: flex;
  align-items: center;
  border: 1px solid #e0e0e0;
  border-radius: 12rpx;
  background: #fafbfc;
  padding: 18rpx 20rpx;
  font-size: 26rpx;
  color: #222;
  cursor: pointer;
  transition: border 0.2s, background 0.2s;
  margin-bottom: 0;
}
.practice-option-label {
  width: 48rpx;
  height: 48rpx;
  border-radius: 50%;
  background: #f2f2f2;
  color: #3ad6b6;
  font-size: 26rpx;
  font-weight: bold;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-right: 18rpx;
}
.practice-option.selected {
  border: 2rpx solid #3ad6b6;
  background: #e6f7f6;
}
.practice-option.selected .practice-option-label {
  background: #3ad6b6;
  color: #fff;
}
.practice-input-area {
  margin-top: 18rpx;
}
.practice-input {
  width: 100%;
  min-height: 120rpx;
  border: 1px solid #e0e0e0;
  border-radius: 10rpx;
  font-size: 26rpx;
  padding: 18rpx 20rpx;
  background: #fff;
  color: #222;
  box-sizing: border-box;
  resize: none;
}
.practice-judge-area {
  display: flex;
  gap: 24rpx;
  margin-top: 24rpx;
  justify-content: flex-start;
}
.practice-judge-btn {
  flex: 1;
  font-size: 26rpx;
  border-radius: 10rpx;
  font-weight: 500;
  height: 64rpx;
  border: 1.5rpx solid #e0e0e0;
  background: #fff;
  color: #222;
  transition: background 0.2s, color 0.2s, border 0.2s;
}
.practice-judge-btn.selected {
  background: #e6f7f6;
  color: #3ad6b6;
  border: 2rpx solid #3ad6b6;
}
.practice-btn-row {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  background: #fff;
  display: flex;
  gap: 24rpx;
  padding: 18rpx 32rpx 24rpx 32rpx;
  box-shadow: 0 -2rpx 8rpx rgba(0,0,0,0.04);
  z-index: 20;
}
.practice-btn {
  flex: 1;
  font-size: 28rpx;
  border-radius: 10rpx;
  font-weight: bold;
  height: 80rpx;
  border: 2rpx solid #3ad6b6;
  background: #fff;
  color: #3ad6b6;
  transition: background 0.2s, color 0.2s;
}
.practice-btn.primary {
  background: #3ad6b6;
  color: #fff;
}
.practice-btn.plain {
  background: #fff;
  color: #3ad6b6;
}
.result-modal {

}
.result-modal-inner {
  background: #fff;
  border-radius: 18rpx 18rpx 12rpx 12rpx;
  width: 92vw;
  max-width:100%;
  max-height: 80vh;
  overflow-y: auto;
  margin: 0 auto;
  box-shadow: 0 4rpx 24rpx rgba(0,0,0,0.12);
  padding: 0 0 32rpx 0;
  display: flex;
  flex-direction: column;
  align-items: center;
}
.result-score-area {
  width: 100%;
  background: #e6f7f6;
  border-radius: 18rpx 18rpx 0 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 32rpx 0 18rpx 0;
}
.result-score {
  width: 80rpx;
  height: 80rpx;
  background: #3ad6b6;
  color: #fff;
  border-radius: 50%;
  font-size: 38rpx;
  font-weight: bold;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 8rpx;
}
.result-summary {
  font-size: 24rpx;
  color: #222;
  margin-bottom: 4rpx;
}
.result-level {
  font-size: 22rpx;
  color: #fa3534;
  font-weight: bold;
}
.result-title {
  font-size: 28rpx;
  color: #222;
  font-weight: bold;
  margin: 24rpx 0 12rpx 0;
  align-self: flex-start;
  margin-left: 32rpx;
}
.result-detail-list {
  width: 100%;
  padding: 0 32rpx;
  display: flex;
  flex-direction: column;
  gap: 18rpx;
}
.result-detail-item {
  background: #fafbfc;
  border-radius: 10rpx;
  padding: 16rpx 18rpx 10rpx 18rpx;
  color: #222;
  font-size: 24rpx;
  display: flex;
  flex-direction: column;
  gap: 6rpx;
}
.result-q {
  font-size: 24rpx;
  color: #222;
  margin-bottom: 2rpx;
}
.result-wrong {
  color: #fa3534;
  font-size: 22rpx;
  display: flex;
  align-items: center;
}
</style>
